<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<meta charset="utf-8">
		<title></title>
		<th:block th:include="include :: header('bff虚拟用况参数设置')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/css/edit.css}" rel="stylesheet"/>
		<link th:href="@{/js/plugins/dragula/dragula.css}" rel="stylesheet"/>
		<script th:src="@{/js/plugins/dragula/dragula.js}"></script>
		<style type="text/css">
			.red {
				color: red !important;
			}

			body .layer-ext-moon .layui-layer-btn .selfBtn {
				background: #f60 !important;
				color: #fff !important;
				border: 1px solid #f60 !important;
				border-radius: 3px !important;
				float: right;
			}
		</style>
	</head>
	<body class="gray-bg">
		<div class="wrapper wrapper-content dubbo-info">
			<div class="col-md-12">
				<div class="row">
					<div class="header dubbo-info-header">
						<h4 class="fz16" th:text="${virtualUsage.slaveInterfaceName}">创建版本</h4>
					</div>
					<div class="col-md-6 left">
						<ul class="nav nav-tabs first-navtabs" role="tablist">
							<li class="active"><a href="#left-one" role="tab" data-toggle="tab">接口设计</a></li>
							<li><a href="#left-two" role="tab" data-toggle="tab">编辑接口</a></li>
						</ul>
						<div class="tab-content">
							<input id="dubboId" type="hidden" th:value="${virtualUsage.interfaceId}">
							<input id="dubboUrl" type="hidden" th:value="${virtualUsage.dubboUrl}">
							<input id="interfaceName" type="hidden" th:value="${virtualUsage.slaveInterfaceName}">
							<input id="optType" type="hidden" th:value="${virtualUsage.optType}">
							<input id="fbType" type="hidden" th:value="${virtualUsage.slaveFbType}">
							<input id="interfaceDescription" type="hidden" th:value="${virtualUsage.interfaceDescription}">
							<input id="nonFunctionalRequirements" type="hidden" th:value="${virtualUsage.nonFunctionalRequirements}">
							<div class="content tab-pane active" role="tabpanel" id="left-one">
								<div class="dubbo-title">
									<span class=""><font th:text="${virtualUsage.dubboUrl}">/createVersion</font></span>
									<span class="pull-right color-blue" style="cursor: pointer;" onclick="dubboEdit()">设计调整</span>
								</div>
								<ul class="nav nav-tabs" role="tablist">
									<li class="active"><a href="#params-in" role="tab" data-toggle="tab" onclick="clickTab(1)">入参</a></li>
									<li><a href="#params-out" role="tab" data-toggle="tab" onclick="clickTab(2)">出参</a></li>
									<span class="pull-right">
										<a class="btn btn-primary btn-rounded btn-sm addFieldBtn" style="background-color:#0088ff;line-height: 1;">添加字段</a>
										<a class="btn btn-primary btn-rounded btn-sm addDataMapBtn" style="margin-left:10px;background-color:#0088ff;line-height: 1;">添加数据集</a>
										<a class="btn btn-primary btn-rounded btn-sm deleteBtn" style="margin-left:10px;background-color:#0088ff;line-height: 1;">批量删除</a>
									</span>
								</ul>
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane active" id="params-in">
									</div>
									<div role="tabpanel" class="tab-pane" id="params-out">
									</div>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane" id="left-two">
								<div class="ibox-content">
									<form class="form-horizontal m-t" id="virtualUsageForm">
										<input id="id" name="id" type="hidden" th:value="${virtualUsage.id}">
										<div class="form-group">
											<div class="full-width">
												<input  name="aliasName" th:value="${virtualUsage.aliasName}" type="text" class="form-control" placeholder="输入接口别名">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">动词：</label>
											<div class="col-sm-4 pull-right">
												<select name="operateType" id="operateType" class="form-control m-b" th:with="type=${@dict.getType('operateType')}">
													<option value="0">请选择</option>
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{virtualUsage.operateType}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">归属域：</label>
											<div class="col-sm-4 pull-right">
												<select name="domainId" id="domainId" class="form-control m-b" required>
													<option value="0">请选择</option>
													<option th:each="dict : ${domainInfoList}" th:text="${dict.domainName}" th:value="${dict.id}" th:field="*{virtualUsage.domainId}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">归属域对象：</label>
											<div class="col-sm-4 pull-right">
												<select name="domainObjectId" id="domainObjectId" class="form-control m-b" required>
													<option value="0">请选择</option>
													<option th:each="dict : ${domainObjectList}" th:text="${dict.objectName}" th:value="${dict.id}" th:field="*{virtualUsage.domainObjectId}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<div class="full-width">
												<input  name="aliasEnName" id="aliasEnName" th:value="${virtualUsage.aliasEnName}" type="text" class="form-control" placeholder="输入接口英文别名">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-3 control-label">是否是主</label>
											<div class="col-sm-2 pull-right">
												<select name="isMaster" id="isMaster" class="form-control noselect2" th:with="type=${@dict.getType('masterOrSlave')}">
													<option value="0">请选择</option>
													<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{virtualUsage.isMaster}"></option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<div class="full-width">
												<textarea id="description" name="description" class="form-control" placeholder="输入虚拟用况描述" style="height: 96px;">[[${virtualUsage.description}]]</textarea>
											</div>
										</div>
										<div class="form-group" style="text-align: center;">
											<button type="button" class="btn btn-primary btn-rounded btn-sm" style="height: 32px;line-height: 1;width: 132px;background: #0088FF;margin-top: 32px;" onclick="submitHandler()">保存</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6 right">
						<ul class="nav nav-tabs first-navtabs contentTab" role="tablist">
							<li class="active"><a href="#content-preview" role="tab" data-action = "" data-toggle="tab">预览</a></li>
							<li><a href="#content-table" role="tab" data-toggle="tab" data-action = "relationTableList">表模型</a></li>
						</ul>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active mt15 " id="content-preview"></div>
							<div role="tabpanel" class="tab-pane content-table mt15" id="content-table"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "interface/interface";
		var interfaceInfo = [[${interfaceInfo}]];
		function submitHandler() {
			var config = {
				url: prefix + "/editVirtualUsage",
				type: "post",
				// contentType: "application/json;charset=utf-8",
				dataType: "json",
				data: $('#virtualUsageForm').serialize(),
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						$.modal.msgSuccess("保存成功");
						$("#descriptionPre").text($("#description").val());
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		}

		$("body").on('click', ".icon-jian", function(e) {
			//删除对应数据
			var removeNode1 = $(this).parents(".list-item").parent(".more");
			var removeNode2 = $(this).parents(".list-item");
			//  标红的字段，不允许删除，只有重置变蓝后，才可以删除
			if (removeNode1.find("a.red").length > 0 || removeNode2.find("a.red").length > 0) {
				$.modal.alertWarning("不能删除");
				return;
			}
			var parentNode = $(this).parent();
			var type = parentNode.attr('data-type');
			var id = parentNode.attr('data-id');
			var url = prefix + "/removeField/" + id;
			if (type == 2) {
				url = prefix + "/removeParamsField/" + id;
			}
			var config = {
				url: url,
				type: "get",
				dataType: "json",
				data: null,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					if (result.code == web_status.SUCCESS) {
						removeNode1.remove();
						removeNode2.remove();
						loadInterfaceParams();
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg);
						$.operate.addTab2("字段被引用其他接口列表", prefix + "/relationInterface?fieldId=" + id + "&type=" + type);
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		}).on('click', ".table-detail", function () {
			var tableId = $(this).attr("tableId");
			$.operate.addTab2("表详情", prefix + "/table_detail/" + tableId);
		}).on('change', '.isRequiredSelect', function () {
			var id = $(this).find("option:selected").attr("data");
			var type = $(this).find("option:selected").attr("data-type");
			var value = $(this).val();
			var config = {
				url: prefix + "/updateIsRequired",
				type: "post",
				dataType: "json",
				data: "id="+id +"&type=" + type + "&isRequired=" + value,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					// if (result.code == web_status.SUCCESS) {
					// 	loadInterfaceParams();
					// } else if (result.code == web_status.WARNING) {
					// 	$.modal.alertWarning(result.msg)
					// } else {
					// 	$.modal.alertError(result.msg);
					// }
				}
			};
			$.ajax(config);
		}).on('change', '#domainId', function () {
			var id = $(this).val();
			var config = {
				url: ctx + "domainInfo/domainInfo/domainObjectList?id="+id,
				type: "POST",
				dataType: "json",
				data: null,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					$("#domainObjectId").empty();
					domainObjectList = null;
					$("#domainObjectId").append('<option value="0">请选择</option>');
					if (result.data && result.data.length > 0) {
						domainObjectList = result.data;
						for (var i=0; i<result.data.length; i++) {
							$("#domainObjectId").append("<option value='"+result.data[i].id+"'>"+result.data[i].objectName+"</option>");
						}
					}
					setAliasEnName()
				}
			};
			$.ajax(config);
		}).on('change', '#domainObjectId', function () {
			setAliasEnName();
		}).on('change', '#operateType', function () {
			setAliasEnName();
		});

		var domainInfoList = [[${domainInfoList}]];
		var domainObjectList = [[${domainObjectList}]];
		var aliasEnName = [[${virtualUsage.aliasEnName}]];

		function setAliasEnName() {
			var domainId = $("#domainId").val();
			var domainObjectId = $("#domainObjectId").val();
			var operateType = $('#operateType').val();
			if (operateType == '0') return;
			if (domainObjectId != '0') {
				for(var i=0; i < domainObjectList.length; i++) {
					if (domainObjectId == domainObjectList[i].id) {
						objectEnName = domainObjectList[i].objectEnName;
						objectName = domainObjectList[i].objectName;
						break;
					}
				}
			} else {
				return;
			}
			objectEnName = objectEnName.charAt(0).toUpperCase() + objectEnName.slice(1);
			if (operateType.indexOf('_') >= 0) {
				$("#aliasEnName").val(operateType.replace("_", objectEnName));
			} else {
				$("#aliasEnName").val( operateType + objectEnName);
			}

		}

		function dubboEdit() {
			$.operate.addTab2("接口编辑", prefix + "/editInterface/" + $("#dubboId").val());
		}

		var paramType = 1;
		function clickTab(type) {
			paramType = type;
		}

		$(".addFieldBtn").click(function() {
			var paramName = "入参";
			if (paramType == 2) {
				paramName="出参";
			}
			var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="fieldSelected">0</span>项</span>'];
			var options = {
				title: '选择' + paramName + '字段',
				height: "600",
				url: prefix + "/usage_field_choose/" + $("#id").val()+ "/" + $("#dubboId").val() + "/" + paramType + "/" + $("#fbType").val(),
				btn: btn,
				callBack: function (index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					return false;
				}
			};
			$.modal.openOptions(options);
		});

		$(".addDataMapBtn").click(function() {
			let btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="paramsSelected">0</span>项</span>'];
			var paramName = "入参";
			if (paramType == 2) {
				paramName="出参";
			}
			let options = {
				title: '选择' + paramName + '数据集',
				height: "600",
				url: prefix + "/usage_data_map_choose/" + $("#id").val()+ "/" + $("#dubboId").val() + "/" + paramType + "/" + $("#fbType").val(),
				btn: btn,
				callBack: function (index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					return false;
				}
			};
			$.modal.openOptions(options);
		});

		$(".deleteBtn").click(function () {
			var fieldDiv = $("#params-in");
			if (paramType == 2) {
				fieldDiv = $("#params-out");
			}
			//  标红的字段，不允许删除，只有重置变蓝后，才可以删除
			if (fieldDiv.find("a.red").length > 0) {
				$.modal.alertWarning("不能批量删除");
				return;
			}
			fieldDiv.find(".icon-jian").each(function () {
				//删除对应数据
				var removeNode1 = $(this).parents(".list-item").parent(".more");
				var removeNode2 = $(this).parents(".list-item");
				var parentNode = $(this).parent();
				var type = parentNode.attr('data-type');
				var id = parentNode.attr('data-id');
				var url = prefix + "/removeField/" + id;
				if (type == 2) {
					url = prefix + "/removeParamsField/" + id;
				}
				var config = {
					url: url,
					type: "get",
					dataType: "json",
					async: false,
					data: null,
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							removeNode1.remove();
							removeNode2.remove();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			});
			loadInterfaceParams();
		})

		function addParamsField(interfaceParamsFieldRelationId) {
			var btn = ['确定', '取消','<span style = "color:#000000">已选择<span id="fieldSelected">0</span>项</span>'];
			var options = {
				title: '选择数据集字段',
				height: "600",
				url: prefix + "/usage_params_field_choose/" + $("#id").val()+ "/" + $("#dubboId").val() + "/" + interfaceParamsFieldRelationId + "/" + $("#fbType").val(),
				btn: btn,
				callBack: function (index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					return false;
				}
			};
			$.modal.openOptions(options);
		}

		$(function() {
			loadInterfaceParams();

			/**标签切换事件*/
			$(".contentTab a").click(function (e) {
				var action = $(this).data("action");
				if(action && action != 'doPreview') {
					window[action]();
				}
			});

			if (!aliasEnName) {
				setAliasEnName();
			}
		})

		/**
		 * 加载 接口参数
		 */
		function loadInterfaceParams() {
			var id = $("#id").val();
			var config = {
				url: prefix + "/paramList",
				type: "post",
				dataType: "json",
				data: "interfaceType=3&interfaceId="+id,
				beforeSend: function () {
					$.modal.loading("正在处理中，请稍后...");
				},
				success: function(result) {
					$.modal.closeLoading();
					$("#params-in").empty();
					$("#params-out").empty();
					if (result.code == web_status.SUCCESS) {
						var resultJson = result.data;
						if(!resultJson) {
							return false;
						}
						initParam(resultJson.requestList, "#params-in");
						initParam(resultJson.responseList, "#params-out");
						doPreview(resultJson);

						initDragula();
					} else if (result.code == web_status.WARNING) {
						$.modal.alertWarning(result.msg)
					} else {
						$.modal.alertError(result.msg);
					}
				}
			};
			$.ajax(config);
		}

		function initParam(params, id) {
			var data = {};
			data.list = params;
			if ("#params-out" == id) {
				data.isInParam=0;
			} else {
				data.isInParam=1;
				if (interfaceInfo.isBranch == 'N') {
					data.sourceFlag = 1;
				}
			}
			var paramsTplHtml = $("#paramsTpl").html();
			laytpl(paramsTplHtml).render(data, function (html) {
				$(id).append(html);
			});
		}

		function initDragula() {
			var containers = $('.list').toArray();
			containers = containers.concat($('.sec-list').toArray());
			dragula(containers, {
				accepts: function(el, target, source, sibling) {
					return target == source;
				}
			}).on('drop', function(el, container) {
				var data = {
					'id' : $("#id").val(),
					'fbType':$("#fbType").val()
				};
				var interfaceParamReqList = [];
				interfaceParamReqList = getParams("#params-in", "1", interfaceParamReqList);
				interfaceParamReqList = getParams("#params-out", "2", interfaceParamReqList);
				data.interfaceParamReqList = interfaceParamReqList;
				var config = {
					url: prefix + "/updateSort",
					type: "post",
					contentType: "application/json;charset=utf-8",
					dataType: "json",
					data: JSON.stringify(data),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
					},
					success: function(result) {
						$.modal.closeLoading();
						if (result.code == web_status.SUCCESS) {
							loadInterfaceParams();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						} else {
							$.modal.alertError(result.msg);
						}
					}
				};
				$.ajax(config);
			})
		}

		function getParams(id,isInParam, interfaceParamReqList) {
			var sortNum = 1;
			$(id).find('.no-top').each(function(){
				var data = {};
				if ($(this).attr('data-id') && $(this).attr('data-id') != 'undefined' && $(this).attr('data-id') != 'null') {
					data.id = $(this).attr('data-id');
				}
				data.objectType = $(this).attr('data-object-type');
				data.objectId = $(this).attr('data-field-id');
				data.isInParam = isInParam;
				data.sortNum = sortNum;
				sortNum ++;
				if ($(this).hasClass('more')) {
					var paramsFieldReqList = getChildParam($(this));
					if (paramsFieldReqList && paramsFieldReqList.length > 0) {
						data.paramsFieldReqList = paramsFieldReqList;
					}
				}
				interfaceParamReqList.push(data);
			});
			return interfaceParamReqList;
		}

		function getChildParam(e) {
			var paramsFieldReqList = [];
			var sortNum = 1;
			$(e).find('.sec-list .list-item').each(function(){
				var child = {};
				if ($(this).attr('data-id') && $(this).attr('data-id') != 'undefined' && $(this).attr('data-id') != 'null') {
					child.id = $(this).attr('data-id');
				}
				child.fieldId = $(this).attr('data-field-id');
				child.sortNum = sortNum;
				sortNum ++;
				paramsFieldReqList.push(child);
			});
			return paramsFieldReqList;
		}

		$.fn.serializeObject = function() {
			var o = {};
			var a = this.serializeArray();
			$.each(a, function() {
				if (o[this.name]) {
					if (!o[this.name].push) {
						o[this.name] = [ o[this.name] ];
					}
					o[this.name].push(this.value || '');
				} else {
					o[this.name] = this.value || '';
				}
			});
			return o;
		};

		/**
		 * 预览
		 */
		function doPreview(data) {
			data = data || [];
			data.interfaceUrl = $("#dubboUrl").val();
			data.description = $("#description").val();
			data.interfaceName = $("#interfaceName").val();
			var contentPreviewTplHtml = $("#contentPreviewTpl").html();
			convertResponse(data);
			laytpl(contentPreviewTplHtml).render(data, function (html) {
				$("#content-preview").empty();
				$("#content-preview").append(html);
			});

			relationTableList();
		}

		/**
		 * 关联表列表函数
		 */
		function relationTableList() {
			var params = {};
			params.interfaceId = $("#id").val();
			params.interfaceType = "3";
			var resultJson;
			var config = {
				url: prefix + "/interfaceTableList",
				type: "POST",
				dataType: "json",
				async: false,
				data: params,
				success: function (result) {
					if (result && result.code == 0) {
						resultJson = result.data;
					}
				}
			};
			$.ajax(config);
			if(!resultJson) {
				return false;
			}
			$.each(resultJson, function (index, a) {
				if (null == a.fieldInfoList || 0 == a.fieldInfoList.length) {
					return;
				}
				let category = a.fieldInfoList[0].category;
				$.each(a.fieldInfoList, function (indexB, b) {
					b.categorySpace = false;
					if (category != b.category) {
						b.categorySpace = true;
						category = b.category;
					}
				});
			});
			var contentTableTplHtml = $("#contentTableTpl").html();
			laytpl(contentTableTplHtml).render(resultJson, function (html) {
				$("#content-table").empty();
				$("#content-table").append(html);
			});
		};

		function fieldDesign(id, type) {
			var url = prefix + "/fieldDesign?id="+id + "&type="+type;
			var width = $(window).width() - 50, height = $(window).height() - 50;
			layer.open({
				type: 2,
				area: [width + 'px', height + 'px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: "字段详细设计",
				content: url,
				btn: ['确定', '重置', '关闭'],
				// 弹层外区域关闭
				shadeClose: true,
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn2: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.resetHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn4: function(index, layero) {
					return true;
				},
				cancel: function(index) {
					return true;
				}
			});
		}


		/**
		 * 字段来源选择
		 * @param interfaceFieldId
		 * @param type
		 */
		function fieldSourceSelect(interfaceFieldId, type) {
			var interfaceId = interfaceInfo.id;
			var fbType = interfaceInfo.fbType;
			if (fbType == '3') {
				fbType = '4';
			}
			var url = ctx + "virtualUsageParamSource/virtualUsageParamSource/fieldSourceAllSelect?interfaceId="+interfaceId+"&fbType="+fbType+"&interfaceFieldId="+interfaceFieldId+"&interfaceFieldType="+type+"&virtualUsageId="+$("#id").val();
			layer.open({
				type: 2,
				area: [800 + 'px', 600 + 'px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: "字段来源选择",
				content: url,
				btn: ['确定', '重置', '关闭'],
				// 弹层外区域关闭
				shadeClose: true,
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					return false;
				},
				btn2: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.resetHandler(index, layero);
					loadInterfaceParams();
					return false;
				},
				btn4: function(index, layero) {
					return true;
				},
				cancel: function(index) {
					return true;
				}
			});
		}

		/**
		 * 字段来源选择
		 * @param interfaceFieldId
		 * @param type
		 */
		function fieldSourceSelect2(interfaceFieldId, type) {
			var interfaceId = interfaceInfo.id;
			var fbType = interfaceInfo.fbType;
			if (fbType == '3') {
				fbType = '4';
			}
			var url = ctx + "virtualUsageParamSource/virtualUsageParamSource/fieldSourceSelect2?interfaceId="+interfaceId+"&fbType="+fbType+"&interfaceFieldId="+interfaceFieldId+"&interfaceFieldType="+type+"&virtualUsageId="+$("#id").val();
			layer.open({
				type: 2,
				area: [800 + 'px', 600 + 'px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: "字段来源选择",
				content: url,
				btn: ['确定', '重置', '关闭'],
				// 弹层外区域关闭
				shadeClose: true,
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					return false;
				},
				btn2: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.resetHandler(index, layero);
					loadInterfaceParams();
					return false;
				},
				btn4: function(index, layero) {
					return true;
				},
				cancel: function(index) {
					return true;
				}
			});
		}

		function fieldDesign2(id, type) {
			var url = prefix + "/fieldDesign2?id="+id + "&type="+type;
			var width = $(window).width() - 50, height = $(window).height() - 50;
			layer.open({
				type: 2,
				area: [width + 'px', height + 'px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: "字段详细设计",
				content: url,
				btn: ['确定', '重置', '关闭'],
				// 弹层外区域关闭
				shadeClose: true,
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn2: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.resetHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn4: function(index, layero) {
					return true;
				},
				cancel: function(index) {
					return true;
				}
			});
		}

		function fieldMergeSelect(fieldId) {
			var url = ctx + "virtualUsageFieldMerge/virtualUsageFieldMerge/fieldMergeSelect?fieldId="+fieldId +"&virtualUsageId="+$("#id").val();
			var width = $(window).width() - 50, height = $(window).height() - 50;
			layer.open({
				type: 2,
				area: [width + 'px', height + 'px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: "字段融合设置",
				content: url,
				btn: ['确定', '重置', '关闭'],
				// 弹层外区域关闭
				shadeClose: true,
				yes: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.submitHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn2: function(index, layero) {
					var iframeWin = layero.find('iframe')[0];
					iframeWin.contentWindow.resetHandler(index, layero);
					loadInterfaceParams();
					layer.close(index);
					return true;
				},
				btn4: function(index, layero) {
					return true;
				},
				cancel: function(index) {
					return true;
				}
			});
		}
	</script>

	<script id="paramsTpl" type="text/template">
		<div id="list" class="list">
			{{# layui.each(d.list, function(index, a){ }}
			{{# if(a.objectType == '2'){ }}
			<div class="more mb-12 no-top" data-id="{{a.id}}" data-field-id="{{a.fieldId}}" data-object-type="2">
				<div class="list-item">
					{{# if(d.isInParam == 1){ }}
					<span class="col-md-5" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/>{{a.fieldName}}</span>
					{{# } else { }}
					<span class="col-md-5" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.isAllowEmpty) { }} red {{# } }}" onclick="fieldDesign2({{a.id}}, 1)">{{a.fieldName}}</a></span>
					{{# } }}
					<span class="col-md-4">{{a.fieldEnName}}</span>

					{{# if(d.sourceFlag == 1){ }}
					<span class="col-md-2"><a class="{{# if(a.sourceFlag == 'Y') { }} red {{# } }}" onclick="fieldSourceSelect({{a.id}}, 2)">来源</a></span>
					{{# } }}
					<span class="pull-right" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian"/></span>
				</div>
				<div class="sec-list">
					{{# if(a.children){ }}
					{{# layui.each(a.children, function(index, b){ }}
					<div class="list-item" data-id="{{b.id}}" data-field-id="{{a.fieldId}}">
						{{# if(d.isInParam == 1){ }}
						<span class="col-md-3" data-id="{{b.id}}" data-type="2"><img th:src="@{/img/Icon-yidongheng.png}" class="icon" /><a class="{{# if(b.aliasName || b.aliasZhName  || b.designContent || b.fieldDescription) { }} red {{# } }}" onclick="fieldDesign({{b.id}}, 2)">{{b.fieldName}}</a></span>
						<span class="col-md-3">{{b.fieldEnName}}</span>
						{{# if(b.isRequiredParent == 'Y') { }}
						<select class="form-control state-select isRequiredSelect" disabled="true">
							{{# } else { }}
							<select class="form-control state-select isRequiredSelect">
								{{# } }}
								{{# if(b.isRequired == 'Y') { }}
								<option data="{{b.id}}" data-type="2" value="Y" selected="selected">必填</option>
								<option data="{{b.id}}" data-type="2" value="N">非必填</option>
								{{# } else if(b.isRequired == 'N'){ }}
								<option data="{{b.id}}" data-type="2" value="Y">必填</option>
								<option data="{{b.id}}" data-type="2" value="N" selected="selected">非必填</option>
								{{# } else { }}
								<option data="{{b.id}}" data-type="2" value="N">非必填</option>
								<option data="{{b.id}}" data-type="2" value="Y">必填</option>

								{{# } }}
							</select>
						{{# } else { }}
						<span class="col-md-3" data-id="{{b.id}}" data-type="2"><img th:src="@{/img/Icon-yidongheng.png}" class="icon" /><a class="{{# if(b.aliasName  || b.aliasZhName  || b.isAllowEmpty || b.treeModel || b.otherModel) { }} red {{# } }}" onclick="fieldDesign2({{b.id}}, 2)">{{b.fieldName}}</a></span>
						<span class="col-md-3">{{b.fieldEnName}}</span>
						<span class="col-md-2">{{b.fieldDataType}}</span>
							{{# if(b.fieldType == '1' || b.fieldType == '2'){ }}
						<span class="col-md-1">
							<a class="{{# if(b.mergeFlag == 'Y') { }} red {{# } }}" onclick="fieldMergeSelect({{b.id}})">融合</a>
						</span>
							{{# } }}
						{{# } }}
							{{# if(d.sourceFlag == 1){ }}
							<span class="col-md-1">
								<a class="{{# if(b.sourceFlag == 'Y') { }} red {{# } }}" onclick="fieldSourceSelect({{b.id}}, 3)">来源</a>
							</span>
							{{# } }}
						<span class="pull-right" data-id="{{b.id}}" data-type="2"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian"/></span>
					</div>
					{{# }); }}
					{{# } }}
				</div>
				<div class="blue btn-add addFieldBtn" onclick="addParamsField({{a.id}})"><img th:src="@{/img/Icon-add.png}" class="icon" style="padding-right: 4px;" />选择字段</div>
			</div>
			{{# } else {}}
			{{# if(a.id){ }}
			<div class="list-item mb-12 no-top" data-id="{{a.id}}" data-field-id="{{a.fieldId}}" data-object-type="1">
				{{# if(d.isInParam == 1){ }}
				<span class="col-md-4" title="{{a.fieldName}}" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.aliasName || a.aliasZhName  ||a.designContent || a.fieldDescription) { }} red {{# } }}" onclick="fieldDesign({{a.id}}, 1)">{{a.fieldName}}</a></span>
				<span class="col-md-3" title="{{a.fieldEnName}}" >{{a.fieldEnName}}</span>
				{{# if(a.isRequiredParent == 'Y') { }}
				<select class="form-control state-select isRequiredSelect" disabled="true">
					{{# } else { }}
					<select class="form-control state-select isRequiredSelect">
						{{# } }}
						{{# if(a.isRequired == 'Y') { }}
						<option data="{{a.id}}" data-type="1" value="Y" selected="selected">必填</option>
						<option data="{{a.id}}" data-type="1" value="N">非必填</option>
						{{# } else if(a.isRequired == 'N'){ }}
						<option data="{{a.id}}" data-type="1" value="Y">必填</option>
						<option data="{{a.id}}" data-type="1" value="N" selected="selected">非必填</option>
						{{# } else { }}
						<option data="{{a.id}}" data-type="1" value="N">非必填</option>
						<option data="{{a.id}}" data-type="1" value="Y">必填</option>
						{{# } }}
					</select>
				{{# } else { }}
				<span class="col-md-4" title="{{a.fieldName}}" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-yidongshu.png}" class="icon"/><a class="{{# if(a.aliasName  ||a.aliasZhName  || a.isAllowEmpty ||a.treeModel || a.otherModel) { }} red {{# } }}" onclick="fieldDesign2({{a.id}}, 1)">{{a.fieldName}}</a></span>
				<span class="col-md-3" title="{{a.fieldEnName}}" >{{a.fieldEnName}}</span>
				<span class="col-md-2">{{a.fieldDataType}}</span>
				{{# } }}
					{{# if(d.sourceFlag == 1){ }}
					<span class="col-md-2"><a class="{{# if(a.sourceFlag == 'Y') { }} red {{# } }}" onclick="fieldSourceSelect({{a.id}}, 1)">来源</a></span>
					{{# } }}
				<span class="pull-right" data-id="{{a.id}}" data-type="1"><img th:src="@{/img/Icon-jianshao.png}" class="icon-jian"/></span>
			</div>
			{{# } }}
			{{# } }}
			{{# }); }}
		</div>
	</script>

	<!--关联字段模板-->
	<script id="contentPreviewTpl" type="text/template">
		<div class="ibox-content content-preview">
			<div class="panel-body">
				<div class="panel-group" id="accordion">
					<div class="panel panel-default">
						<div id="collapseOne" class="panel-collapse collapse in">
							<div class="part-one">
								<div class="pull-left" style="margin-right: 20px;">
									{{d.interfaceName}}</div>
								<div>{{d.interfaceUrl}}</div>
							</div>
							<dl class="dl-horizontal">
								<dt>接口描述</dt>
								<dd id="descriptionPre" style="margin-left: 70px !important;">{{d.description}}</dd>
							</dl>
							<div class="panel-body" style = "border:0px;">
								<div class="panel-tit">参数</div>
								<ul class="list-group">
									<li class="list-group-item" style="height: auto; padding-top:0px;">
										<div class="re-body">
											<p>requestBody：//输入参数</p>
											<p>{</p>
											<ul class="list-group field">
												{{# layui.each(d.requestList, function(index, a){ }}
												{{# if(a.children == null || a.children.length == 0){ }}
												<li class="list-group-item">
													{{# if(a.objectType=='2'){ }}
													<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '-'}}</p>
													<br>
													<p>}],</p>
													{{# } else { }}
													<p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '-'}}{{a.fieldEnumListName || ''}}</span></p>
													{{# } }}
												</li>
												{{# } else { }}
												<li class="list-group-item">
													{{# if(a.children.length > 1){ }}
													<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
													<ul class="list-group field">
														{{# layui.each(a.children, function(index, b){ }}
														<li class="list-group-item" style = "margin-left:10px;">
															<p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
														</li>
														{{# }); }}
													</ul>
													<p>}],</p>
													{{# } else { }}
													<p>"{{a.fieldEnName}}" : ["{{a.children[0].mockData || '一'}}"], // {{a.fieldName || '一'}}</p>
													{{# } }}
												</li>
												{{# }}}
												{{# }); }}
											</ul>
											<p>}</p>
										</div>
									</li>
									<li class="list-group-item space"></li>
									<li class="list-group-item" style="height: auto;padding-top:0px;">
										<div class="re-body">
											<p>response：//返回参数</p>
											<p>{</p>
											<ul class="list-group field">
												<li class="list-group-item">
													<p>"errCode" : "1",<span style="color: red; display: inline !important;"> //返回状态（true/false）</span></p>
													<p>"message" : "获取成功",<span style="color: red; display: inline !important;"> //获取成功/获取失败</span></p>
													<p>"data" : { <span style="color: red; display: inline !important;"> //返回数据</span></p>
													<ul class="list-group field">
														{{# layui.each(d.responseList, function(index, a){ }}
														{{# if(a.children == null || a.children.length == 0){ }}
														<li class="list-group-item">
															{{# if(a.objectType=='2'){ }}
															<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
															<p>}],</p>
															{{# } else { }}
															{{# if(a.fieldEnName == 'total' || a.fieldEnName == 'isLastPage' || a.fieldEnName == 'pages'){ }}
															<p>"{{a.fieldEnName}}" : {{a.mockData}}, // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
															{{# } else { }}
															<p>"{{a.fieldEnName}}" : "{{a.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{a.fieldName || '一'}}{{a.fieldEnumListName || ''}}</span></p>
															{{# } }}
															{{# } }}
														</li>
														{{# } else { }}
														<li class="list-group-item">
															<p>"{{a.fieldEnName}}" : [{ // {{a.fieldName || '一'}}</p>
															<ul class="list-group field">
																{{# layui.each(a.children, function(index, b){ }}
																{{# if(b.children == null || b.children.length == 0){ }}
																<li class="list-group-item">
																	{{# if(b.objectType=='2'){ }}
																	<p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
																	<p>}],</p>
																	{{# } else { }}
																	<p>"{{b.fieldEnName}}" : "{{b.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{b.fieldName || '一'}}{{b.fieldEnumListName || ''}}</span></p>
																	{{# } }}
																</li>
																{{# } else { }}
																<li class="list-group-item">
																	<p>"{{b.fieldEnName}}" : [{ // {{b.fieldName || '一'}}</p>
																	<ul class="list-group field">
																		{{# layui.each(b.children, function(index, c){ }}
																		{{# if(c.children == null || c.children.length == 0){ }}
																		<li class="list-group-item">
																			{{# if(c.objectType=='2'){ }}
																			<p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
																			<p>}],</p>
																			{{# } else { }}
																			<p>"{{c.fieldEnName}}" : "{{c.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{c.fieldName || '一'}}{{c.fieldEnumListName || ''}}</span></p>
																			{{# } }}
																		</li>
																		{{# } else { }}
																		<li class="list-group-item">
																			<p>"{{c.fieldEnName}}" : [{ // {{c.fieldName || '一'}}</p>
																			<ul class="list-group field">
																				{{# layui.each(c.children, function(index, d){ }}
																				{{# if(d.children == null || d.children.length == 0){ }}
																				<li class="list-group-item">
																					{{# if(d.objectType=='2'){ }}
																					<p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
																					<p>}],</p>
																					{{# } else { }}
																					<p>"{{d.fieldEnName}}" : "{{d.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{d.fieldName || '一'}}{{d.fieldEnumListName || ''}}</span></p>
																					{{# } }}
																				</li>
																				{{# } else { }}
																				<li class="list-group-item">
																					<p>"{{d.fieldEnName}}" : [{ // {{d.fieldName || '一'}}</p>
																					<ul class="list-group field">
																						{{# layui.each(d.children, function(index, e){ }}
																						<li class="list-group-item">
																							<p>"{{e.fieldEnName}}" : "{{e.mockData || '一'}}", // <span style="color: #FFA500; display: inline !important;">{{e.fieldName || '一'}}{{e.fieldEnumListName || ''}}</span></p>
																						</li>
																						{{# }); }}
																					</ul>
																					<p>}],</p>
																				</li>
																				{{# } }}
																				{{# }); }}
																			</ul>
																		</li>
																		{{# } }}
																		{{# }); }}
																	</ul>
																	<p>}],</p>
																</li>
																{{# } }}
																{{# }); }}
															</ul>
															<p>}],</p>
														</li>
														{{# }}}
														{{# }); }}
													</ul>
													<p>}</p>
												</li>
											</ul>
											<p>}</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					{{# if(d.interfaceType == 2) { }}
					<div class="panel-tit">虚拟用况</div>
					<div class="panel panel-default">
						<div class="panel-heading" data-toggle="collapse"  href="#collapseTwo">
							<h1 class="panel-title">
								<span class="badge badge-primary">1</span>
								<span>解除项目相关人员删除个人在项目中的数据 /v1/createVersion</span>
							</h1>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse">
							<div class="panel-body">
								Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" data-toggle="collapse"  href="#collapseThree">
							<h1 class="panel-title">
								<span class="badge badge-primary">2</span>
								<span>解除项目相关人员删除个人在项目中的数据 /v1/createVersion</span>
							</h1>
						</div>
						<div id="collapseThree" class="panel-collapse collapse">
							<div class="panel-body">
								Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
							</div>
						</div>
					</div>
					{{# } }}
				</div>
			</div>
		</div>
	</script>
	<!--关联字段模板-->
	<script id="contentTableTpl" type="text/template">
		{{# layui.each(d, function(index, a){ }}
		<div class="retation-table">
			<p class="blue-background">
				<img th:src="@{/img/table.png}">
				<span>{{a.tableName}}&nbsp;&nbsp;{{a.tableEnName}}</span>
				<span  style="color: #0088FF;float: right;margin-right: 12px;"><a class = "table-detail" tableId = "{{a.id}}">查看详情</a></span>
			</p>
			<ul class="list-group">
				{{# layui.each(a.fieldInfoList, function(indexB, b){ }}
				{{# if(b.categorySpace) { }}
				<li class="list-group-item space"></li>
				{{# }}}
				<li class="list-group-item">
					<font style = "width:30px;display: inline-block">{{# if(b.fieldType=='1') { }} PK {{# } else if(b.fieldType == '2') { }} FK {{#} else { }}-{{#}}}</font>
					<span>{{b.fieldName || '一'}}</span>
					<span>
						{{b.fieldEnName || '一'}}
							{{# if(b.fieldLength) { }}
								({{b.fieldLength}})
							{{# } }}
					</span>
					<span>{{# if(b.fieldDataType=='1') { }} 文本 {{# } else if(b.fieldDataType == '2') { }} 数字 {{#} else { }}日期{{#}}}</span>
				</li>
				{{# }); }}
			</ul>
		</div>
		{{# }); }}
	</script>
</html>
